<template>
  <div class="home">
    <!-- <ul> -->
      <!-- 
        active-class 匹配路由地址中是否有包含的当前路由的部分如果有就显示对应的类名
        exact-active-class 精确匹配路由地址并显示对应的类名 路由地址必须完全匹配才行
       -->
      <!-- <router-link active-class="normal" exact-active-class="active" tag="li" v-for="item in arr" :key="item.id" :to="'/about/' + item.id">about页面</router-link> -->
    <!-- </ul> -->
    <ul>
      <router-link active-class="normal" exact-active-class="active" tag="li" to="/page">页面1</router-link>
      <router-link active-class="normal" exact-active-class="active" tag="li" to="/page/two">页面2</router-link>
      <router-link active-class="normal" exact-active-class="active" tag="li" to="/page/two/three">页面3</router-link>
      <router-link active-class="normal" exact-active-class="active" tag="li" to="/page/four">页面4</router-link>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      arr: [
        {
          name: "About",
          id: 123
        },
        {
          name: "About",
          id: 4566
        },
        {
          name: "About",
          id: 121324334
        },
        {
          name: "About",
          id: 3545646
        }
      ]
    }
  },
  methods: {
    
  }
}
</script>
<style>
  ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
  }
  li {
    line-height: 30px;
  }
  .active{
    background-color: blue;
    color: #fff;
  }
</style>
